<template>
  <div class="layout-container">
    <el-container style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;">
      <el-header class="d-flex align-items-center" style="background-color: rgb(84, 92, 100);">
        <h5 class="h5 text-light mb-0 mr-auto">{{$myConfig.logo}}</h5>
        <el-menu
          :default-active="navBar.active"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-menu-item :index="index | numToString" v-for="(item, index) in navBar.list" :key="index">
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
        <el-submenu index="6-1">
          <template slot="title">
            <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
            admin
          </template>
          <el-menu-item index="userEdit">修改</el-menu-item>
          <el-menu-item index="userOut">退出</el-menu-item>
        </el-submenu>
      </el-menu>

      </el-header>
      <el-container style="height: 100%;">
        <el-aside width="200px">
          <el-menu  
            class="w-100" 
            style="height: 100%;" 
            :default-active="slideMenuActive">
            <!-- <el-menu-item 
              :index="item.pathName" 
              v-for="(item, index) in slideMenus" 
              :key="index">
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item> -->
            <template v-for="(item, index) in slideMenus">
              <sub-menu @slideSelect="slideSelect" v-if="item.children && item.children.length > 0" :key="index" :child="item" :index="index + ''"></sub-menu>
              <el-menu-item 
                @click.native="slideSelect({index: index + '', pathName: item.pathName})" 
                :key="index" 
                v-else 
                :index="index + ''">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main class="bg-light layout-main">
          <!-- 面包屑导航 -->
          <div class="border-bottom breadcrumb-wrapper mb-3 bg-white" v-if="bran.length > 0">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <template v-for="(item, index) in bran">
                <el-breadcrumb-item 
                  :key="index" 
                  :to="{ path: item.path }">{{item.title}}</el-breadcrumb-item>
                <!-- <el-breadcrumb-item v-else :key="index">{{item.title}}</el-breadcrumb-item> -->
              </template>
            </el-breadcrumb>
          </div>
          <el-backtop target=".el-main"></el-backtop>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import '@/assets/css/common.css';
import commonMixins from '@/common/mixins/common.js'
import SubMenu from '@/components/SubMenu.vue'
export default {
  mixins: [commonMixins],
  data() {
    return {
      navBar: [],
      // 面包屑数据
      bran: []
    }
  },
  components: {
    SubMenu
  },
  created(){
    this.navBar = this.$myConfig.navBar
    this.getRouterBran()
    // 初始化选中菜单
    this._initNavBar()
  },
  methods: {
    // 点击nav
    handleSelect(key) {
      if(key === 'userEdit'){ // 修改用户信息
        return
      }
      if(key === 'userOut'){ // 用户退出
        return
      }
      console.log(key)
      if(key == this.navBar.active) return;
      this.navBar.active = key.toString()
      this.slideMenuActive = '0'
      // 默认跳转到第一个
      if (this.slideMenus.length>0) {
        this.$router.push({
          name: this.slideMenus[this.slideMenuActive].pathName
        })
      }
    },
    // 点击侧边栏
    slideSelect(obj){
      // 刚开始做的时候 默认激活使用的自定义 subActive 属性 menu上绑定的index是数据的下标
      // 此种方式 针对多级菜单 有弊端 改成了以下使用$route.name的方式 多级菜单使用递归实现
      // this.slideMenuActive = key
      if(obj.index === this.slideMenuActive) return;
      this.slideMenuActive = obj.index
      // 跳转到指定页面
      this.$router.push({
        name: obj.pathName
      })
    },
    // 获取面包屑导航
    getRouterBran(){
      let arrMatched = this.$route.matched.filter(v=>v.name)
      let arr = []
      arrMatched.forEach((v, k)=>{
        // 过滤layout和index
        if(v.name === 'index' || v.name === 'layout') return;
        arr.push({
          name: v.name,
          path: v.path,
          title: v.meta.title || ''
        })
      })
      if(arr.length > 0){
        arr.unshift({
          name: 'index',
          path: '/index',
          title: '后台首页'
        })
      }
      this.bran = arr
    },
    _initNavBar(){
      let navActive = localStorage.getItem('navActive')
      if(navActive){
        navActive = JSON.parse(navActive)
        this.slideMenuActive = navActive.left
        this.navBar.active = navActive.top
      }
    }
  },
  computed: {
    // 设置默认的侧边导航栏激活状态
    slideMenuActive: {
      get(){
        return this.navBar.list[this.navBar.active].subActive || '0'
      },
      set(val){
        this.navBar.list[this.navBar.active].subActive = val
      }
    },
    // 获取nav导航栏激活 渲染左侧菜单数据
    slideMenus(){
      return this.navBar.list[this.navBar.active].submenu || []
    }
  },
  watch: {
    $route(to, from){
      // 本地存储
      localStorage.setItem('navActive', JSON.stringify(
        {
          top: this.navBar.active,
          left: this.slideMenuActive
        }
      ))
      this.getRouterBran()
    }
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadFn())
  }
}
</script>

<style scoped>
  /* 面包屑 */
  .breadcrumb-wrapper{
    padding: 20px;
    margin-left: -20px;
    margin-top: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }
  .breadcrumb-wrapper /deep/ .el-breadcrumb__item{
    cursor: pointer;
  }
  .layout-container /deep/ .layout-main {
    padding-bottom: 80px;
    position: relative;
  }
  
</style>